<template>
  <view class="flex-col page">
    <view class="flex-col group">
      <view class="flex-col group_1">
        <view class="section_1"> </view>
        <view class="flex-col section_2">
          <view class="top-group justify-between">
            <text class="text_1">时间：2021-12-12 19:02:03</text>
            <text class="text_3">未回复</text>
          </view>
          <view class="divider"> </view>
          <text class="text_4">问题：系统卡顿</text>
          <view class="flex-row equal-division">
            <image
              src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844660617269005.png"
              class="equal-division-item"
            />
            <image
              src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844660655735918.png"
              class="equal-division-item image_2"
            />
            <image
              src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844661317800967.png"
              class="equal-division-item image_3"
            />
          </view>
        </view>
      </view>
      <view class="flex-col section_3">
        <view class="flex-col section_4">
          <view class="top-group justify-between">
            <text class="text_1">时间：2021-12-12 19:02:03</text>
            <text class="text_6">已回复</text>
          </view>
          <view class="divider"> </view>
          <text class="text_7">问题：系统卡顿</text>
          <view class="flex-row equal-division_1">
            <image
              src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844660617269005.png"
              class="equal-division-item"
            />
            <image
              src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844660655735918.png"
              class="equal-division-item image_5"
            />
            <image
              src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844661317800967.png"
              class="equal-division-item image_6"
            />
          </view>
        </view>
        <text class="text_8">平台已经处理</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {};
    },
  };
</script>

<style scoped lang="scss">
  .page {
    background-color: #f8f8f8;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    .group {
      padding-bottom: 544rpx;
      flex: 1 1 auto;
      overflow-y: auto;
      .group_1 {
        padding-bottom: 396rpx;
        position: relative;
        .section_1 {
          background-image: linear-gradient(
            180deg,
            rgb(255, 255, 255) 0%,
            rgb(255, 255, 255) 0%,
            rgb(248, 248, 248) 100%,
            rgb(248, 248, 248) 100%
          );
          height: 48rpx;
        }
        .section_2 {
          padding: 0 24rpx 24rpx;
          background-color: rgb(255, 255, 255);
          border-radius: 24rpx;
          position: absolute;
          left: 32rpx;
          right: 32rpx;
          top: 50%;
          transform: translateY(-50%);
          .text_4 {
            margin-top: 24rpx;
            color: rgb(0, 0, 0);
            font-size: 28rpx;
            line-height: 40rpx;
            white-space: nowrap;
          }
          .equal-division {
            margin-top: 24rpx;
            .image_2 {
              margin-left: 26rpx;
            }
            .image_3 {
              margin-left: 24rpx;
            }
          }
        }
      }
      .section_3 {
        margin: 0 32rpx;
        padding-bottom: 16rpx;
        background-color: rgba(24, 181, 103, 0.12);
        border-radius: 24rpx;
        .section_4 {
          padding: 0 24rpx 24rpx;
          background-color: rgb(255, 255, 255);
          border-radius: 24rpx;
          .text_7 {
            margin-top: 24rpx;
            color: rgb(0, 0, 0);
            font-size: 28rpx;
            line-height: 40rpx;
            white-space: nowrap;
          }
          .equal-division_1 {
            margin-top: 24rpx;
            .image_5 {
              margin-left: 26rpx;
            }
            .image_6 {
              margin-left: 24rpx;
            }
          }
        }
        .text_8 {
          margin-left: 24rpx;
          margin-top: 14rpx;
          color: rgb(24, 181, 103);
          font-size: 24rpx;
          line-height: 34rpx;
          white-space: nowrap;
        }
      }
      .top-group {
        padding: 24rpx 0 22rpx;
        .text_1 {
          color: rgb(102, 102, 102);
          font-size: 28rpx;
          line-height: 40rpx;
          white-space: nowrap;
        }
        .text_3 {
          color: rgb(243, 151, 53);
          font-size: 28rpx;
          line-height: 40rpx;
          white-space: nowrap;
        }
        .text_6 {
          color: rgb(24, 181, 103);
          font-size: 28rpx;
          line-height: 40rpx;
          white-space: nowrap;
        }
      }
      .divider {
        margin-left: 4rpx;
        background-image: repeating-linear-gradient(
          90deg,
          rgb(228, 228, 228),
          rgb(228, 228, 228) 1.2618296529968454%,
          transparent 1.2618296529968454%,
          transparent 2.5236593059936907%
        );
        height: 2rpx;
      }
      .equal-division-item {
        flex: 1 1 196rpx;
        border-radius: 24rpx;
        width: 196rpx;
        height: 196rpx;
      }
    }
  }
</style>